<template>
	<el-col :span="spans">
		<el-form-item :label="labelName" :label-width="GLOBAL.formLabelWidth" :prop="propVal">
			<el-date-picker style="width: 100%" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="val"
			 :type="type" :range-separator="type =='daterange' ? '至':''" :start-placeholder="type=='daterange'?'开始日期':''"
			 :end-placeholder="type=='daterange'?'结束日期':''" :placeholder="type=='daterange'?'':'请选择日期'" @change="dateChange">
			</el-date-picker>
		</el-form-item>
	</el-col>
</template>

<script>
	export default {
		props: ['spans', 'propVal', 'labelName', 'type', 'value'],
		data() {
			return {
				val: ''
			}
		},
		methods: {
			dateChange() {
				this.$emit('dateEvent', this.val, this.propVal)
			}
		},
		watch: {
			'value': {
				handler(newVal) {
					this.val = newVal
				},
				immediate: true,
				deep: true
			},
		}
	}
</script>

<style>
</style>
